import React from 'react'
import './index.css'
import PubSub from 'pubsub-js';
export default function Footer({todos}) {
    let total = todos.length;
    let doneNum = todos.reduce((pre,cur)=>pre + cur.isDone, 0)
    function changeAll(e) {
        let check = e.target.checked
        // console.log(check);
        PubSub.publish('checkAll', check)
        
    }
    function delhasDone(flag){
        PubSub.publish('delhasDone',flag)
    }
    return (
        <div className="todo-footer">
            <label>
                <input type="checkbox" onChange={(e) => changeAll(e)} checked={doneNum === total && total > 0}/>
            </label>
            <span>
                <span>已完成 {doneNum}</span> / 全部 {total}
            </span>
            <button className="btn btn-danger" onClick={() => delhasDone() }>清除已完成任务</button>
        </div>
    )
}
